<template>
  <div id="users">
    <!-- 上传按钮 -->
    <div class="btn">
      <el-button type="primary" @click="toAdd()"
        >上传用户信息<i class="el-icon-upload el-icon--right"></i
      ></el-button>
    </div>
    <!-- 搜索框 -->
    <!-- <div class="widthdiv marginLeft">
      <el-input
        size="samll"
        v-model="currentId"
        placeholder="请输入内容"
        clearable
      ></el-input>
    </div> -->
    <!-- 用户表格 -->
    <div id="forms">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="用户ID" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" width="300">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="300">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.realname }}</p>
              <p>性别: {{ scope.row.gender }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.realname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" width="400">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出生日期" width="400">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">
              {{ moment(scope.row.birth).format("YYYY-MM-DD HH:mm:ss") }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="looked(scope.row.id)"
              >查看用户权限</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- Form dialog -->
    <div id="dialogs">
      <el-dialog :title="title1" :visible.sync="visible">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item
            prop="username"
            label="用户名"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item
            prop="password"
            label="密码"
            :label-width="formLabelWidth"
          >
            <el-input
              type="password"
              v-model="form.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            prop="realname"
            label="姓名"
            :label-width="formLabelWidth"
          >
            <el-input
              type="text"
              v-model="form.realname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="gender"
            required
            label="性别"
            :label-width="formLabelWidth"
          >
            <el-radio v-model="form.gender" label="男">男</el-radio>
            <el-radio v-model="form.gender" label="女">女</el-radio>
          </el-form-item>
          <el-form-item
            prop="birth"
            :label-width="formLabelWidth"
            label="出生日期"
            required
          >
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth"
              :picker-options="pickerDisabled"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            prop="telephone"
            label="电话号码"
            :label-width="formLabelWidth"
          >
            <el-input
              type="text"
              v-model="form.telephone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="toCancel">取 消</el-button>
          <el-button type="primary" @click="toSave('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 权限FORM dialog -->
    <div id="dialogs_power">
      <el-dialog :title="title2" :visible.sync="visible_power">
        <el-table :data="powerData">
          <el-table-column
            prop="id"
            label="Id序号"
            width="150"
          ></el-table-column>
          <el-table-column
            property="name"
            label="权限名称"
            width="150"
          ></el-table-column>
          <el-table-column
            width="200"
            property="route"
            label="路径"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <!-- 分页插件 -->
    <div>
      <span class="demonstration">总页数</span>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "../../utils/request";
let moment = require("moment");
export default {
  data() {
    return {
      //时间禁用
      pickerDisabled: {
        disabledDate: (time) => {
          return time.getTime() > new Date() * 1 + 600 * 1000;
        },
      },

      visible_power: false,
      //power模态框的数据
      powerData: [],
      //power模态框的title
      title2: "用户权限信息",
      // 模态框规则
      rules: {
        username: [
          { required: true, message: "请输入您的用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入您的密码", trigger: "blur" },
        ],
        realname: [
          { required: true, message: "请输入您的真实姓名", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入您的手机号码", trigger: "blur" },
        ],
      },
      //上传模态框的数据
      form: {},
      //上传模态框的标题
      title1: "用户信息",
      //模态框最开始是看不见的
      visible: false,
      total: 0,
      //分页查询
      pageParam: {
        page: 1,
        pageSize: 10,
        name: "",
      },
      //表单控件标题的宽度
      formLabelWidth: "120px",
      tableData: [],
    };
  },
  computed: {},
  methods: {
    //正则判断函数
    jungeGender() {
      //判断性别是否选择
      if (!this.form.gender) {
        this.$notify.error({
          title: "失败",
          message: "请完善您的信息",
        });
        return false;
      }
    },
    // jungeBirth() {
    //   var now = moment().locale("zh-cn").format("YYYY-MM-DD HH:mm:ss");
    //   now = moment().valueOf();
    //   let birth = 0;
    //   if (this.form.birth) {
    //     birth = moment(this.form.birth).valueOf();
    //     if (birth > now || !this.form.birth) {
    //     this.$notify.error({
    //       title: "失败",
    //       message: "请选择您的正确出生日期，您不会是出生在未来年代吧！！",
    //     });
    //     return false;
    //    }
    //   }else{

    //   }

    //   //判断出生时间是否正确
    //   // console.log(!this.form.birth, "-====", birth > now);
    //   // console.log(this.form.birth, "-====", birth > now);
    //   // console.log(birth, now, "-0-===");

    // },
    //查看用户权限
    async looked(id) {
      if (id) {
        let res = await axios.get("/baseUser/findMenuByUserId", {
          params: {
            id,
          },
        });
        console.log(res.data);
        this.powerData = res.data;
        if (res.data.length == 0) {
          this.$notify({
            message: "该用户无任何权限",
            type: res.status == 200 ? "success" : "error",
          });
        } else {
          this.visible_power = true;
        }
      } else {
        console.log("error submit!!");
        return false;
      }
    },
    //点击删除按钮
    handleDelete(id) {
      let res;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        if (id) {
          res = await axios.get("/baseUser/deleteById", {
            params: {
              id,
            },
          });
        } else {
          res = await axios.post("/baseUser/deleteById", {
            ids: this.multipleSelection.toString(),
          });
        }

        this.$notify({
          title: res.status == 200 ? "成功" : "失败",
          message: res.statusText,
          type: res.status == 200 ? "success" : "error",
        });
        this.pageQuery();
      });
    },
    //取消按钮
    toCancel() {
      this.$refs["ruleForm"].resetFields();
      this.visible = false;
    },
    //模态框关闭之前
    beforeClose(done) {
      //表单重置
      this.$refs["ruleForm"].resetFields();
      done();
    },
    //点击确定按钮
    toSave(formName) {
      this.$refs[formName].validate((valid) => {
        //确认提交前正则判断
        this.jungeGender();
        // this.jungeBirth();
        this.form.birth = moment(this.form.birth).valueOf();
        if (valid) {
          //校验通过
          axios.post("/baseUser/saveOrUpdate", this.form).then((res) => {
            if (res.status == 200) {
              //关闭模态框，刷新数据
              this.$notify({
                title: "成功",
                message: "这是一条成功的提示消息",
                type: "success",
              });
              this.toCancel();
              this.pageQuery();
            } else {
              this.$notify.error({
                title: "失败",
                message: "保存失败",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //上传按钮
    toAdd() {
      this.form = {};
      this.visible = true;
      this.title = "录入用户的信息";
    },
    //分页函数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // this.pageParam={
      //     ...this.pageParam,
      //     pageSize:val,
      // }
      this.pageParam.pageSize = val;
      this.pageQuery();
    },
    //
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageParam.page = val;
      this.pageQuery();
    },
    //取消按钮关闭模态框
    toCancel() {
      this.$refs["ruleForm"].resetFields();
      this.visible = false;
    },
    //模态框关闭之前
    beforeClose(done) {
      //表单重置
      this.$refs["ruleForm"].resetFields();
      done();
    },
    //点击编辑函数
    handleEdit(row) {
      this.title = "修改用户的信息";
      this.form = {
        ...row,
      };
      this.visible = true;
    },
    //时间函数
    moment,
    //导入数据的函数
    async pageQuery() {
      let res = await axios.get("/baseUser/pageQuery", {
        params: this.pageParam,
      });
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
  },
  created() {
    this.pageQuery();
  },
  mounted() {},
};
</script>
<style  scoped>
#forms {
  height: 800px;
  margin: 0 auto;
}
.widthdiv {
  float: right;
}
</style>